import React, { Component, createRef } from 'react'

export default class Contron extends Component {
    state = {val:""}
    myRef=createRef();
    get = ()=>{
        //ref是字符串：               console.log(this.refs.inp.value);
        //ref是回调函数时：           console.log(this.inp.value);
        //ref是createRef创建的容器时： console.log(this.myRef); 

        // let val = document.querySelector('input').value;
        // console.log(val);
        console.log(this.state.val);        //受控组件  等同于上两行

        //this.refs.inp得到输入框
        // console.log(this.refs.inp.value);
        console.log(this.inp.value);

        console.log(this.myRef);
    }
    changeVal = (e)=>{
        //e.target为当前输入框
        this.setState({val:e.target.value});
    }
    // getNode = ele =>{ele=>this.inp = ele;console.log(ele)} 
    render() {
        const {val} = this.state;
        return (
            <div>
                <input onInput={this.changeVal} value={val} placeholder='请输入内容'/>

                {/* ref的值是一个回调函数，不是一个字符串了 */}
                {/* <input ref={()=>{console.log('ref')}}/> */}
                {/* 返回一个真实的DOM节点 */}
                {/* <input ref={(ele)=>{console.log(ele)}}/>           */}
                {/* 以内联的形式 每更新时（即每键入一次时）会执行两次， */}
                <input ref={ele=>this.inp = ele}/>   
                {/* 这种形式只执行一次 */}
                {/* <input ref={this.getNode}/>           */}

                <input ref={this.myRef}/>


                <button onClick={this.get}>打印输入内容</button>
            </div>
        )
    }
}
